﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Jogo.aspx.cs" Inherits="CavinatorSite.Jogo" %>

<!DOCTYPE html>

<html>
<head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jogo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
    <%--<link href="css/bootstrap-responsive.css" rel="stylesheet">--%>
    <style>
        #rodape {
            position: absolute;
            bottom: 0;
            text-align: center;
            width: 100%;
        }

        .select {
            font-size: 16px;
            line-height: 1;
            width: 350px;
            border: 1;
            border-radius: 4px;
            height: 40px;
        }
    </style>
</head>
<body style="background-color: #4274B9">
 
    <form id="form1" runat="server"> 
           <asp:HiddenField runat="server" ID="hdQuestion"></asp:HiddenField>
        <div class='bloco' style='background: url(img/fundo.jpg) no-repeat; min-width: 100%; background-size: cover; min-height: 100%;'>
            <div>
                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" style="color: #FFFFFF" href="#">Cavinator</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="Home.aspx">Home <span class="sr-only">(current)</span></a></li>
                                <li class="active"><a href="Jogo.aspx">Jogo</a></li>
                                <li class="active"><a href="Credito.aspx">Créditos</a></li>
                            </ul>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div style="width: 38%; height: 450px; margin-top: 15%; margin-left: 31.4%;">
                        <div style="text-align: center">
                            <h3>
                                <asp:Label ID="lblAnswer"  runat="server" Text=""></asp:Label>
                                <asp:HiddenField ID="hdIdQuestion" runat="server" />
                            </h3>
                            <asp:Label ID="lblResp"  runat="server" Text="">Resposta:</asp:Label>
                            <br />
                            <br>
                            <asp:DropDownList ID="ddlrespostas" runat="server" CssClass="select">
                            </asp:DropDownList>
                            <br />
                            <br />
                            <br />
                            <asp:Button ID="btnNext" runat="server" CssClass="btn btn-primary btn-lg" OnClick="BtnNextClick" Text="Continuar" />
                            <br>
                            <%--<button class="btn btn-success btn-lg" style="width: 250px;">Continuar</button>--%><br>
                            <br>
                            <%--<button class="btn btn-danger btn-lg" style="width: 250px;">Não</button>--%>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="rodape" style="background-color: #000000; color: #FFFFFF">
            <p>Todos Direitos Reservados a Turma XIII de Engenharia da Computação - 2014 </p>
        </div>

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 10%;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">Já sei!</h4>
                    </div>
                    <div class="modal-body">
                         A resposta é: <asp:Label ID="lblAnswer2" name="lblAnswer" runat="server" Text=""></asp:Label>
                        <br />
                        <br />
                        Esta resposta é a correta? Se não adicione um novo item <br />
                    <div class="modal-footer">
                          <asp:Button runat="server" ID="btnNovoItem" OnClick="btnNovoItem_Click" CssClass="btn btn-primary" Text="Adicionar Novo Item" /> 
                          <a class="btn btn-success" href="Jogo.aspx">Iniciar Jogo</a>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="modal fade" id="myModalErro" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 10%;">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalErroLabel">Que pena!</h4>
                    </div>
                    <div class="modal-body">
                         Que pena! Você conseguiu me vencer!
                        <br />
                        <br />
                        Como não consegui adivinhar o que você pensou, por favor me diga a resposta.<br />
                    <div class="modal-footer">
                          <asp:Button runat="server" ID="Button1" OnClick="btnNovoItem_Click" CssClass="btn btn-primary" Text="Adicionar Novo Item" /> 
                          <a class="btn btn-success" href="Jogo.aspx">Iniciar Jogo</a>
                    </div>
                </div>
            </div>
            </div>
        </div>
        <script src='js/jquery-min.js'> </script>
        <script src='js/bootstrap.js'> </script>
        <script>
            $(document).ready(function () {
                var altura_tela = $(window).height();/*cria variável com valor do altura da janela*/
                $(".bloco").height(altura_tela); /* aplica a variável a altura da div*/
                $(window).resize(function () {
                    /*quando redimensionar a janela faz a mesma coisa */
                    var altura_tela = $(window).height();
                    $(".bloco").height(altura_tela);
                });
            });
        </script>
    </form>
</body>
</html>
